<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>SwiftAdmin Layui 表单设计器</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/layui.css?v=v1.1.20" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="module/formDesign/formdesign.css?33">
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body style="background-color: #f7f7f9;">
    <form class="layui-form layui-card fromDesign">
        <div class="layui-card-body" style="height: 100%;">
            <div class="layui-row" style="height: 100%;">
                <div class="layui-col-md2" style="height: 100%; box-shadow: 2px 0 20px 0 rgba(0,0,0,.1);">
                    <div class="layui-tab layui-tab-brief" style="height: 100%;">
                        <ul class="layui-tab-title">
                            <li class="layui-this">表单组件</ol>
                            <li>表单模板</ol>
                        </ul>
                        <div class="layui-tab-content" id="layui-form-attribute"
                            style="overflow: auto; height: calc(100% - 70px);">
                            <!-- 组件库 -->
                            <div class="layui-tab-item layui-form layui-show">
                                <!-- 搜索组件 -->
                                <div style="margin: 0 12px;">
                                    <input class="layui-input" type="text" name="e2ent_id" value=""
                                        placeholder="请输入关键字搜索组件" />
                                </div>
                                <!-- 表单组件 -->
                                <div class="component">
                                    <div class="layui-card">
                                        <div class="layui-card-header head">
                                            表单组件
                                        </div>
                                        <div class="layui-card-body component-group" id="sort_1">
                                            <ol data-tag="input">
                                                <div class="icon"><i class="layui-icon layui-icon-layer"></i></div>
                                                <div class="name">单行输入</div>
                                            </ol>
                                            <ol data-tag="textarea">
                                                <div class="icon"><i class="layui-icon layui-icon-align-left"></i>
                                                </div>
                                                <div class="name">多行输入</div>
                                            </ol>
                                            <ol data-tag="radio">
                                                <div class="icon"><i class="layui-icon layui-icon-radio"></i></div>
                                                <div class="name">单选框</div>
                                            </ol>
                                            <ol data-tag="checkbox">
                                                <div class="icon"><i class="layui-icon layui-icon-table"></i></div>
                                                <div class="name">多选框</div>
                                            </ol>
                                            <ol data-tag="select">
                                                <div class="icon"><i class="layui-icon layui-icon-print"></i></div>
                                                <div class="name">下拉框</div>
                                            </ol>
                                            <ol data-tag="date">
                                                <div class="icon"><i class="layui-icon layui-icon-time"></i></div>
                                                <div class="name">日期组件</div>
                                            </ol>
                                            <ol data-tag="colorpicker">
                                                <div class="icon"><i class="layui-icon layui-icon-theme"></i></div>
                                                <div class="name">颜色选择器</div>
                                            </ol>
                                            <ol data-tag="slider">
                                                <div class="icon"><i class="layui-icon layui-icon-slider"></i></div>
                                                <div class="name">滑块</div>
                                            </ol>
                                            <ol data-tag="rate">
                                                <div class="icon"><i class="layui-icon layui-icon-rate-solid"></i>
                                                </div>
                                                <div class="name">评分</div>
                                            </ol>
                                            <ol data-tag="switch">
                                                <div class="icon"><i class="layui-icon layui-icon-switch">
                                                        <k></k>
                                                    </i></div>
                                                <div class="name">开关</div>
                                            </ol>
                                            <ol data-tag="cascader">
                                                <div class="icon"><i class="layui-icon layui-icon-cols"></i></div>
                                                <div class="name">级联选择器</div>
                                            </ol>
                                            <ol data-tag="editor">
                                                <div class="icon"><i class="layui-icon layui-icon-form"></i></div>
                                                <div class="name">富文本</div>
                                            </ol>
                                            <ol data-tag="upload">
                                                <div class="icon"><i class="layui-icon layui-icon-upload"></i></div>
                                                <div class="name">文件上传</div>
                                            </ol>
                                            <ol data-tag="tags">
                                                <div class="icon"><i class="layui-icon fa-instagram"></i></div>
                                                <div class="name">标签选择器</div>
                                            </ol>
                                            <ol data-tag="json">
                                                <div class="icon"><i class="layui-icon fa-bars"></i></div>
                                                <div class="name">JSON组件</div>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                                <!-- 辅助组件 -->
                                <div class="component">
                                    <div class="layui-card">
                                        <div class="layui-card-header head">
                                            辅助组件
                                        </div>
                                        <div class="layui-card-body component-group" id="sort_2">
                                            <ol data-tag="tips">
                                                <div class="icon"><i class="layui-icon layui-icon-tips"></i></div>
                                                <div class="name">提示</div>
                                            </ol>
                                            <ol data-tag="button">
                                                <div class="icon"><i class="layui-icon layui-icon-layer"></i></div>
                                                <div class="name">按钮</div>
                                            </ol>
                                            <ol data-tag="note">
                                                <div class="icon"><i class="layui-icon layui-icon-note"></i></div>
                                                <div class="name">便签</div>
                                            </ol>
                                            <ol data-tag="subtraction">
                                                <div class="icon"><i class="layui-icon layui-icon-subtraction"></i>
                                                </div>
                                                <div class="name">分割线</div>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                                <!-- 布局组件 -->
                                <div class="component">
                                    <div class="layui-card">
                                        <div class="layui-card-header head">布局组件</div>
                                        <div class="layui-card-body component-group" id="sort_3">
                                            <ol data-tag="tab">
                                                <div class="icon"><i class="layui-icon layui-icon-tabs smallfont"></i>
                                                </div>
                                                <div class="name">TAB选项卡</div>
                                            </ol>
                                            <ol data-tag="grid">
                                                <div class="icon"><i class="layui-icon layui-icon-layouts"></i>
                                                </div>
                                                <div class="name">栅格</div>
                                            </ol>
                                            <ol data-tag="space">
                                                <div class="icon"><i class="layui-icon layui-icon-more"></i></div>
                                                <div class="name">间距</div>
                                            </ol>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!-- // 加载远程表单模板 -->
                            <div id="layui-form-template" class="layui-tab-item">
                                <div id="item-list" class="item-list"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md8" style="height: 100%;">
                    <div class="layui-card" style="height: 100%; margin: 0 12px;">
                        <div class="layui-card-header">
                            <!-- 顶部按钮 -->
                            <div class="fr">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-exportHTML"><i
                                        class="layui-icon layui-icon-exportHTML"></i>导出HTML</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-export"><i
                                        class="layui-icon layui-icon-export"></i>导出JSON</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-import"><i
                                        class="layui-icon layui-icon-layer"></i>导入JSON</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-component"> <i
                                        class="layui-icon layui-icon-component"></i> 预览</button>
                                <button type="button"
                                    class="layui-btn layui-btn-sm layui-btn-danger layui-form-clear"><i
                                        class="layui-icon layui-icon-delete"></i>清空</button>
                            </div>
                        </div>
                        <div class="layui-card-body" style="height: calc(100% - 42px);">
                            <!-- 表单设计区域 -->
                            <div id="formBuilder" style="height: calc(100% - 20px); overflow: auto;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2" style="height: 100%; box-shadow: -2px 0 20px 0 rgba(0,0,0,.1);">
                    <div class="layui-tab layui-tab-brief" style="height: 100%;">
                        <ul class="layui-tab-title">
                            <li class="layui-this">组件属性</ol>
                            <li>表单属性</ol>
                        </ul>
                        <div class="layui-tab-content" id="layui-form-attribute"
                            style="overflow: auto; height: calc(100% - 70px);">
                            <!-- 组件属性 -->
                            <div class="layui-tab-item layui-form layui-show" id="Propertie" lay-filter="Propertie">
                            </div>
                            <!-- 表单属性 -->
                            <div class="layui-tab-item" style="overflow: hidden;">
                                <div class="layui-card" style="box-shadow: none">
                                    <div class="layui-card-header">
                                        <font color="red">* </font>表单ID
                                    </div>
                                    <div class="layui-card-body">
                                        <input type="text" id="formname" name="formname" class="layui-input" value=""
                                            placeholder="请输入表单ID">
                                    </div>
                                </div>
                                <div class="layui-card" style="box-shadow: none">
                                    <div class="layui-card-header">表单类型</div>
                                    <div class="layui-card-body">
                                        <input type="radio" name="formtype" title="内置">
                                        <input type="radio" name="formtype" title="弹窗" checked="">
                                    </div>
                                </div>
                                <div class="layui-card" style="box-shadow: none">
                                    <div class="layui-card-header">表单按钮</div>
                                    <div class="layui-card-body">
                                        <input type="radio" name="postBtn" title="开启" checked="">
                                        <input type="radio" name="postBtn" title="关闭">
                                    </div>
                                </div>
                                <div class="layui-card" style="box-shadow: none">
                                    <div class="layui-card-header">表单宽高</div>
                                    <div class="layui-card-body">
                                        <input type="number" id="formWidth" name="width" class="layui-input" value=""
                                            placeholder="请输入宽度">
                                        <input type="number" id="formHeight" name="height" class="layui-input" value=""
                                            placeholder="请输入高度">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="layui-htmlview" style="display: none;">
        <textarea id="json-code"></textarea>
        <div class="layui-htmlbtn">
            <button id="copy-code" class="layui-btn layui-hide">复制代码</button>
            <button id="import-code" class="layui-btn layui-hide">导入数据</button>
        </div>
    </div>

    <script src="layui.js?v=v"></script>
    <!-- // 全局加载第三方JS -->
    <script src="cascadata.js?v=v1.1.20"></script>
    <script src="tinymce/tinymce.min.js?v=v1.1.20"></script>
    <!-- // 加载font-awesome图标 -->
    <link href="css/font-awesome.css?v=v1.1.20" rel="stylesheet" type="text/css" />
    <script src="Sortable/Sortable.js?v=v1.1.20"></script>
    <script src="index.js"></script>
    <script>
        // 解决拖拽打开新标签问题
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }

        layui.use(['jquery'], function () {
            var $ = layui.jquery;

            var width = $(window).width();
            var height = $(window).height();
            console.log(width, height)
            $('.fromDesign').width(width);
            $('.fromDesign').height(height);

            // 解决 layui-input layui-button 宽高设定问题
            $('.layui-input').removeAttr('style', '')
            $('.layui-btn').removeAttr('style', '')

            // 根据窗口来高度自动适配
            $(window).resize(function () {
                var width = $(window).width();
                var height = $(window).height();
                console.log(width, height)
                $('.fromDesign').width(width);
                $('.fromDesign').height(height);
            })
        })

    </script>
    <style>
        .fromDesign {
            min-width: 1200px;
            min-height: 480px;
        }

        .layui-card {
            background-color: transparent;
            margin: 0;
            box-sizing: border-box;
        }

        .layui-card-header {
            background-color: transparent;
            border-bottom: 2px solid #eee;
            box-sizing: border-box;
        }

        .layui-card-body {
            background-color: transparent;
            box-sizing: border-box;
        }
        .layui-card-body > .layui-input {
            margin-top: 12px;
        }
    </style>
</body>

</html>